import './App.css';
// react-router-dom  react的路由插件
import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import Todo from '../todo/todo';
import List from '../list/list';

/* function App() {
  const list = ['吃饭', '睡觉', '打豆豆'];
  function add(item) {
    list.push(item);
    console.log(list);
  }
  return (
    <div>
      <h1>todolist</h1>
      <Todo add={add}></Todo>
      <List list={list}></List>
    </div>
  );
} */
class App extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    list: ['吃饭', '睡觉', '打豆豆'],
    base: 30,
    step: 0
  }
  add = (item) => {
    const arr = this.state.list;
    arr.push(item);
    this.setState({
      list: arr

    })
  }
  componentDidMount() {
    // pubsub订阅  注意this指向
    PubSub.subscribe('give', (msg, data) => {
      console.log(data);
      this.setState({
        step: data
      })
    })
  }
  render() {
    return (
      <div>
        <h1>todolist</h1>
        <Todo add={this.add}></Todo>
        <List list={this.state.list}></List>
        <h1>于明洋由于上课挂着游戏以及拖欠30 共计{this.state.base + this.state.step}</h1>
      </div>
    );
  }
}

export default App;

/* 
脚手架文件说明:
public 静态资源文件
manifest.json 应用加壳的配置文件
robots.txt 爬虫协议文件

src 源码文件
App.css是App.js的样式文件
App.js App组件 组件的后缀名可以写.js 建议写.jsx

App.test.js 用于APP做测试

index.js 入口文件
index.css样式
reportWebVitals.js 页面性能分析  利用 web-vitals库

setupTest.js 组件单元测试的文件 jest-dom库支持

 <React.StrictMode></React.StrictMode>
 严格模式
 例如：ref绑定是若是用字符串的方式 就会报错


 建议：
 普通组件写到components文件夹中，路由组件views或者pages中


 组件传值
 props进行传值 一层一层来传递
 一般数据  父组件传递数据给子组件 子组件读取数据 this.props.xx
 函数数据  子组件传递数据给父组件  子组件调用函数 
 pubsub-js库 任意组件传值

 redux
 

*/